<template>
  <div class="setting-main">
    <el-row type="flex" :gutter="60">
      <el-col :span="10" style="border-right: 1px #999 dashed;">
        <upload-avatar-setting @imgLoaded="imgLoaded"/>
      </el-col>
      <el-col :span="10">
        <base-profile-setting/>
      </el-col>
    </el-row>
    <Cropper :isShowCropper.sync="ShowCropper" :imgSrc="imgSrc" :uploadUrl="uploadAvatar"

             @uploadSuccess="uploadSuccess" @uploadError="uploadError"></Cropper>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

import BaseProfileSetting from "./childComp/BaseProfileSetting";
import UploadAvatarSetting from "./childComp/UploadAvatarSetting";

import Cropper from "@/components/Cropper";

export default {
  components: {
    BaseProfileSetting, UploadAvatarSetting, Cropper
  },
  data: function () {

    return {

      ShowCropper: false,
      imgSrc: '',
      uploadAvatar: '/user/setAvatar',
    }
  },
  methods: {
    ...mapActions([
      'getProfile'
    ]),
    imgLoaded(imgSrc) {
      console.log(imgSrc);
      this.imgSrc = imgSrc;
      this.ShowCropper = true;
    },
    uploadSuccess() {
      this.$message.success("头像更新成功");
      this.ShowCropper = false;
      this.getProfile();
    },
    uploadError() {
      this.$message.error("头像更新失败,请重试");
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-main {
  margin-left: 40px;
  padding-bottom: 20px;
}

.avatar-upload-card {
  width: 100%;
}
</style>
